// pages/recommend.js
'use client';
import {useState} from "react";

export default function Recommend() {
    // const [pdfFile, setPdfFile] = useState(null);
    // const [message, setMessage] = useState('');
    //
    // // @ts-ignore
    // const handleFileChange = (event) => {
    //     setPdfFile(event.target.files[0]);
    // };

    // @ts-ignore
    // const handleSubmit = async (event) => {
    //     event.preventDefault();
    //     if (!pdfFile) {
    //         setMessage('Please upload a PDF file.');
    //         return;
    //     }
    //
    //     const formData = new FormData();
    //     formData.append('file', pdfFile);
    //
    //     try {
    //         const response = await fetch('http://127.0.0.1:8000/upload_pdf/', {
    //             method: 'POST',
    //             body: formData,
    //         });
    //
    //         if (response.ok) {
    //             const data = await response.json();
    //             setMessage(data.message);
    //         } else {
    //             setMessage('Failed to upload PDF.');
    //         }
    //     } catch (error) {
    //         console.error('Error:', error);
    //         setMessage('An error occurred while uploading.');
    //     }
    // };

    const [question, setQuestion] = useState('');
    const [answer, setAnswer] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    // @ts-ignore
    const handleAskSubmit = async (event) => {
        event.preventDefault();
        setLoading(true);
        setError('');

        try {
            const response = await fetch('http://127.0.0.1:8000/ask/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({question}),
            });

            if (!response.ok) {
                throw new Error('Failed to retrieve answer.');
            }

            const data = await response.json();
            if (data.answer)
                setAnswer(data.answer);
            if (data.error)
                setError(data.error)
        } catch (err) {
            // @ts-ignore
            setError(err.message);
        } finally {
            setLoading(false);
        }
    };

    const [input, setInput] = useState("");
    const [recommendations, setRecommendations] = useState("");

    const handleRecommendSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await fetch("http://127.0.0.1:8000/recommend", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({input: input}),
            });

            // if (!response.ok) {
            //     throw new Error("网络响应不是 OK");
            // }

            const data = await response.json();
            setRecommendations(data.recommendations);
        } catch (error) {
            console.error("Error fetching recommendations:", error);
            setRecommendations("获取推荐时出错，请稍后再试。");
        }
    };

    return (
        <div className={' flex flex-col items-center w-full '}>
            <div className={'prose bg-blue-50 min-h-screen py-3 w-full'}>
                {/*<div className={'flex flex-col items-center gap-2'}>*/}
                {/*    <h1>上传pdf</h1>*/}
                {/*    <form onSubmit={handleSubmit}>*/}
                {/*        <input type="file" accept="application/pdf" onChange={handleFileChange} required/>*/}
                {/*        <button*/}
                {/*            className={'ml-2 p-2 bg-green-200 rounded-lg'}*/}
                {/*            type="submit">Upload*/}
                {/*        </button>*/}
                {/*    </form>*/}
                {/*    {message && <p>{message}</p>}*/}
                {/*</div>*/}
                {/*<br/>*/}

                <div className={'flex flex-col items-center gap-2'}>
                    <h1>根据简历问答</h1>
                    <form onSubmit={handleAskSubmit}>
                        <input
                            className={'p-2 border border-black rounded-lg'}
                            type="text"
                            value={question}
                            onChange={(e) => setQuestion(e.target.value)}
                            placeholder="Type your question..."
                            required
                        />
                        <button
                            className={'ml-2 p-2 bg-green-200 rounded-lg'}
                            type="submit" disabled={loading}>
                            {loading ? 'Loading...' : 'Ask'}
                        </button>
                    </form>
                    {answer && <div className={'max-w-[60%]'}><h2>Answer:</h2><p>{answer}</p></div>}
                    {error && <div style={{color: 'red'}}>Error: {error}</div>}
                </div>
                <br/>

                <div className={'flex flex-col items-center gap-2'}>
                    <h1>岗位推荐系统</h1>
                    <form className={'flex flex-col items-center'} onSubmit={handleRecommendSubmit}>
                    <textarea
                        className={'p-2 border border-black rounded-lg'}
                        value={input}
                        onChange={(e) => setInput(e.target.value)}
                        placeholder="请输入您的需求"
                        required
                    />
                        <br/>
                        <button
                            className={'ml-2 p-2 bg-green-200 rounded-lg'}
                            type="submit">获取推荐
                        </button>
                    </form>
                    {recommendations && (
                        <div className={'max-w-[60%]'}>
                            <h2>推荐结果:</h2>
                            <p>{recommendations}</p>
                        </div>
                    )}
                </div>
                <br/>
            </div>
        </div>
    )
}
